<template>
  <div class="brand-logout">
    <div class="regbox">
      <div class="reg-title">
        <h2>商标注销申请</h2>
      </div>
      <div class="reg-form">
        <el-form :model="Form" :rules="rules" ref="Form" label-width="200px" class="demo-ruleForm">
          <el-form-item label="申请人名称（中文）：" prop="proposer">
            <el-input v-model="Form.proposer"></el-input>
          </el-form-item>
          <el-form-item label="商标注册号：" prop="brandNumber">
            <el-input v-model="Form.brandNumber"></el-input>
          </el-form-item>
          <el-form-item label="是否共有商标：" prop="isbrand">
            <el-radio-group v-model="Form.isbrand">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="未交回原注册证原因:" prop="cause">
            <el-input type="textarea" v-model="Form.cause" :autosize="{ minRows: 5}"></el-input>
          </el-form-item>
          <el-form-item label="添加类别" prop="sort">
            <el-input type="button" v-model="Form.sort"></el-input>
          </el-form-item>
          <el-form-item label="注销商品/服务项目(分类填写):" prop="deleteGoods">
            <el-input type="textarea" v-model="Form.deleteGoods" :autosize="{ minRows: 5}"></el-input>
          </el-form-item>
          <base-upload @getFile="getFile"></base-upload>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <button class="r-f-sut" @click="subForm">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseUpload from "@/components/base-component/BaseUpload";
export default {
  components: {
    BaseUpload
  },
  data() {
    return {
      Form: {
        proposer: "",
        brandNumber: "",
        isbrand: "是",
        cause: "",
        sort: "",
        deleteGoods: ""
      },
      rules: {
        proposer: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        brandNumber: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        cause: [{ required: true, message: "字段不能为空", trigger: "blur" }]
      },
      //   说明文件
      Explain: "",
      // 确认书
      Confirmation: ""
    };
  },
  methods: {
    // 获取数据
    getFile(Explain, Confirmation) {
      this.Explain = Explain;
      this.Confirmation = Confirmation;
    },
    // 提交按钮
    subForm() {
      var data = new FormData();
      data.append("add_model", 1);
      data.append("applicant", "赵云");
      data.append("cancellation_commodity", "不知道");
      data.append("class_id", 1);
      // data.append('confirmation',1);
      this.Confirmation.forEach(el => {
        data.append("file", el);
      });
      data.append("id", 1);
      data.append("is_share", 1);
      data.append("reasons_withdrawal", "任性");
      data.append("regist_num", "9527");
      this.$http({
        url: "http://192.168.0.102:8080/tca/addInfo",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data
      }).then(el => {
        console.log(el);
      });
    }
  }
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.brand-logout {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      margin-left: 120px;
      .el-form-item {
        margin-top: 50px;
      }
    }
    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
  }
}
</style>
